const { resolve, join } = require("path");
// const fs = require("fs")
const Vueloader = require("vue-loader/lib/plugin");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 用于把HTML页面放入内存
const Minicss = require("mini-css-extract-plugin"); // webpack4.0以后的打包css文件
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const WebpackBar = require("webpackbar");
const liuconfig = require(`${process.cwd()}/liu.config.js`);
console.log(liuconfig);
console.log(join(process.cwd(), "./src/index.html"));
const htmlplugin = new HtmlWebpackPlugin({
  template: join(process.cwd(), "./src/index.html"), // 源头文件
  filename: "index.html", // 生成首页的文件名称
  environment: {
    arrowFunction: true,
  }, // 打包不使用箭头函数
});
const css = new Minicss({
  // 输出css独立文件
  filename: `/static/css/[name].[chunkhash].css`,
  chunkFilename: "[id].[chunkhash].css", // 或者id
});
module.exports.bases = {
  externals: liuconfig.externals,
  optimization: liuconfig.optimization,
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "@": resolve(process.cwd() + "/src"),
    },
  },
  module: {
    rules: liuconfig.module.rules.concat([
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(js|jsx)$/,
        use: ["babel-loader", "eslint-loader"],
        include: [resolve(__dirname, "src")],
        // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        exclude: /node_modules/,
      },

      {
        test: /\.(tsx | ts)?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: Minicss.loader,
            options: {
              // css插件在预编译配置
            },
          },
          "css-loader",
        ],
      },
      {
        test: /\.less$/, // 匹配特定文件的正则表达式或正则表达式数组
        use: [
          {
            loader: Minicss.loader,
            options: {
              // css插件在预编译配置
            },
          },
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(scss|sass)$/, // 匹配特定文件的正则表达式或正则表达式数组
        use: [
          {
            loader: Minicss.loader,
            options: {
              // css插件在预编译配置
            },
          },
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|jpg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/img/[name].[ext]",
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/media/[name].[ext]",
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/fonts/[name].[ext]",
        },
      },
    ]),
  },
  plugins: liuconfig.plugins.concat([
    htmlplugin,
    css,
    new Vueloader(),

    new CopyWebpackPlugin([
      {
        from: resolve(process.cwd(), "./static"),
        to: `./static`,
        ignore: [".*"],
      },
    ]),
    new WebpackBar(),
    new CleanWebpackPlugin(),
  ]),
};
